<template>
<div >
    <input
    type="text"
    id="newtodo"
    v-model="todoTitle"
    @keyup.enter="addTodo"
    placeholder="请输入"
  />
 
 <van-button id="btnTestNet" @click="addItem" class="input">新增11</van-button>

  <van-button id="btnClearNet" @click="getDataFromNet" class="input"></van-button>
  <!-- <van-tabs>
    <van-tab :title="notCompletedTitle" :badge="activeLen">
<items :mainTitle="notCompletedTitle" :datalist="activeTodoListRef" :todoLists="todoLists" ></items>
    </van-tab>
    <van-tab :title="completedTitle" :badge="completedLen">

<items :mainTitle="completedTitle" :datalist="finishedTodoListRef" :todoLists="todoLists" ></items>
    </van-tab>
  </van-tabs> -->

<van-tabs>
  <van-tab v-for="(item,index) in tabList" :title="item.title" :key="index" :badge="item.badge">

<items :mainTitle="item.title" :datalist="item.datalist" :todoLists="todoLists" ></items>
  </van-tab>
</van-tabs>
</div>
</template>

<script setup>

 import {ref,computed,onMounted,reactive,watch,defineProps} from 'vue'
import getData from './data'
import toDoFunc from './operation'
import request from '../../utils/request'
import items from './components/items.vue'
//import getTodoLists from './watchtodolist';
//const { todoLists }= getTodoLists()
//  const todoTitle = ref('')

const {
        todoLists,
        todoTitle,
        tabList
    }= getData()

const  { addTodo} = toDoFunc(todoLists,todoTitle)
     const getId= ()=> {
        return Date.now() + Math.random().toString(16).substr(2, 4);
    }
 const addItem=()=>{

 // fetch('/api/string',{}).then(res=>console.log(res))
 let itemstr=todoTitle.value.trim()
 if(itemstr){
            let itemObj = {
                id:getId(),
                completed:false,
                title:itemstr
            }
 addTodo(itemObj)
 request.saveTodoItem(itemObj)
 }

 }

 const getDataFromNet=()=>{

    request.getAllTodoItems()
 }
</script>

<style scoped>
a {
  color: #000000;
  text-decoration: none;
  margin: 10px;
}
a:hover {
  color: #f40;
}

input{
 padding: 60rpx;
}

</style>
